﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
	String path = request.getContextPath();
%>
<jsp:include page="/comm/header.jsp"></jsp:include>
<div class="clear"></div>
<!--第1部分开始  -->
<div class="wrap1">
	<div class="blank1"></div>
	<!--选项卡开始-->
	<div id="mainTabbox">
		<jsp:include page="../tabboxhead.jsp" />
		<div id="conten">
			<div class="tab_show" id="con_tabmy_1">
				<jsp:include page="left2.jsp"></jsp:include>
				<div class="wrap_left">
					<div class="wrap_m2">
						<div class="wrap_m2_cont">
							<!--帐号管理选项卡开始 -->
							<div class="box_profile">
								<div class="wrap_center">
									<div class="wrap_left">
										<span class="tab7_tt">我要做经纪人</span>&nbsp;&nbsp;&nbsp;要想成为经纪人,请先完善个人资料!
									</div>
									<div class="wrap_right">
										<div class="pbox6">
											<ul>
												<li class="bg1">&nbsp;</li>
												<li class="s1"><span class="tt">1.&nbsp;&nbsp;完善资料</span></li>
												<li class="bg2">&nbsp;
												<li>
												<li class="s2"><span class="tt">2.&nbsp;&nbsp;身份证验证</span></li>
												<li class="bg4">&nbsp;
												<li>
											</ul>
										</div>
									</div>
								</div>
								<br />
								<br />
								<div class="clear"></div>
								<div id="tabbox6">
									<ul>
										<li id="tabp1" onclick="setTab('tabp',1,3)" class="hover"><a>基本资料</a></li>
										<li id="tabp2" onclick="setTab('tabp',2,3)"><a>头像照片</a></li>
									</ul>

								</div>
								<div id="conten6">
									<div class="tabp_show" id="con_tabp_1">
										<!--选项卡1内容开始-->
									<form name="saveImportInfo" action="<%=path%>/saveImportInfo.htm" method="post">
											<s:hidden name="t" value="2"></s:hidden>
											<div class="input_box">
												<div id="tipMessage1">
													<s:property value="tipMessage" />
												</div>
												<ul>
													<li class="t1"><span class="span33">用户账户：</span></li>
													<li class="t2"><s:property value="userModel.email" /></li>
													<li class="t1"><span class="span33">用户昵称：</span></li>
													<li class="t2"><s:if test="userModel.nickName!=null">
															<s:textfield name="userModel.nickName" id="nickName"
																disabled="true" cssClass="input1" />
															<span id="nickName_msg"></span>
														</s:if> <s:else>
															<s:textfield name="userModel.nickName" id="nickName"
																cssClass="input1" />
															<span id="nickName_msg"></span>
														</s:else></li>
													<li class="t1"><span class="span33">性 别：</span></li>
													<li class="t2"><s:if test="userModel.nickName!=null">
															<s:radio id="sex" name="userModel.sex"
																list="#{1:'男' , 0:'女'}" disabled="true"
																value="userModel.sex" theme="simple" />
														</s:if> <s:else>
															<s:radio id="sex" name="userModel.sex"
																list="#{1:'男' , 0:'女'}" value="userModel.sex"
																theme="simple" />
														</s:else></li>

													<li class="t1"><span class="span33">手机号码：</span></li>
													<li class="t2"><s:if test="userModel.nickName!=null">
															<s:textfield name="userModel.mobile" id="mobile"
																disabled="true" cssClass="input1" />
														</s:if> <s:else>
															<s:textfield name="userModel.mobile" id="mobile"
																cssClass="input1" />
														</s:else> <span id="mobile_msg"></span></li>

													<li class="t1"><span class="span33">腾讯QQ：</span></li>
													<li class="t2"><s:if test="userModel.nickName!=null">
															<s:textfield name="userModel.qqid" id="qqid"
																disabled="true" cssClass="input1" />
														</s:if> <s:else>
															<s:textfield name="userModel.qqid" id="qqid"
																cssClass="input1" />
														</s:else> <span id="qqid_msg"></span></li>
													<li class="t1"><span class="span33">MSN：</span></li>
													<li class="t2"><s:if test="userModel.nickName!=null">
															<s:textfield name="userModel.msnid" id="msnid"
																disabled="true" cssClass="input1" />
														</s:if> <s:else>
															<s:textfield name="userModel.msnid" id="msnid"
																cssClass="input1" />
														</s:else> <span id="msnid_msg"></span></li>
													<li class="t1"><span class="span33">真实姓名：</span></li>
													<li class="t2"><s:if test="userModel.nickName!=null">
															<s:textfield name="userModel.realName" disabled="true"
																id="realname" cssClass="input1" />
														</s:if> <s:else>
															<s:textfield name="userModel.realName" id="realname"
																cssClass="input1" />
														</s:else><span class="span_broker">(*经纪人填写）</span>
														<span id="name_msg"></span></li>

													<li class="t1"><span class="span33">代购区域：</span></li>
													<li class="t2" style="margin-bottom: 20px;">
													<s:if test="userModel.nickName!=null">
															<s:checkboxlist id="area" name="userModel.arrArea"
																theme="simple" disabled="true" list="serviceAreaList"
																listKey="areaId" listValue="areaName" cssClass="input1" />
														</s:if> <s:else>
															<s:checkboxlist id="area" name="userModel.arrArea"
																theme="simple" list="serviceAreaList" listKey="areaId"
																listValue="areaName" cssClass="input1" />
														</s:else> <span class="span_broker">(*经纪人填写）</span><span id="area_msg"></span>
														<div id="quyu_msg"></div></li>
													<li class="t1"><span class="span33">代购行业：</span></li>
													<li class="t2" style="margin-bottom: 20px;"><s:if
															test="userModel.nickName!=null">
															<s:checkboxlist id="category" name="userModel.arrCat"
																disabled="true" theme="simple" list="serviceTypeList"
																listKey="categoryId" listValue="categoryName"
																cssClass="input1" />
														</s:if> <s:else>
															<s:checkboxlist id="category" name="userModel.arrCat"
																theme="simple" list="serviceTypeList"
																listKey="categoryId" listValue="categoryName"
																cssClass="input1" />
														</s:else> <span class="span_broker">(*经纪人填写）</span>
														<span id="hangye_msg"></span></li>
													<li class="t1"><span class="span33">从事职业：</span></li>
													<li class="t2"><s:if test="userModel.nickName!=null">
															<s:textfield name="userModel.profession" disabled="true"
																id="profession" cssClass="input1" />
														</s:if> <s:else>
															<s:textfield name="userModel.profession" id="profession"
																cssClass="input1" />
														</s:else> <span class="span_broker">(*经纪人填写）</span>
														<span id="zhiye_msg"></span></li>
													<li class="t1"><span class="span33">代购格言：</span></li>
													<li class="t2" style="margin-bottom: 70px;"><s:if
															test="userModel.nickName!=null">
															<s:textarea id="selfdesc" name="userModel.selfdesc"
																disabled="true" cols="60" rows="5" />
															<span id="selfdesc_msg"></span>
														</s:if> <s:else>
															<s:textarea id="selfdesc" name="userModel.selfdesc"
																cols="60" rows="5" />
															<span id="selfdesc_msg"></span>
														</s:else><span class="span_broker">(*经纪人填写）</span></li>
													<li><s:if test="userModel.nickName!=null">
															<div id="modifyInfo1Button" class="but_submit"
																style="text-align: center; float: left;">
																<a href="#" onclick="modifyInfo1();">修改</a>&nbsp;&nbsp;&nbsp;
															</div>

															<div id="saveInfo1Button" class="but_submit"
																style="display: none; margin-left: 40px; float: left;">
																<a href="#" onclick="submitInfo1();">保存</a>&nbsp;&nbsp;&nbsp;
															</div>
														</s:if> <s:else>
															<div id="modifyInfo1Button" class="but_submit"
																style="display: none;">
																<a href="#" onclick="modifyInfo1();">修改</a>&nbsp;&nbsp;&nbsp;
															</div>
															<div id="saveInfo1Button" class="but_submit"
																style="text-align: center; margin-left: 80px; float: left;">
																<a href="#" onclick="submitInfo1();">保存</a>&nbsp;&nbsp;&nbsp;
															</div>
														</s:else></li>
												</ul>
											</div>
										</form>
										<div class="clear"></div>
										<!--选项卡1内容结束-->
									</div>
									<div class="tabp_show" id="con_tabp_2">
										<!--选项卡2内容开始-->
										<div class="input_box">
											<div class="pbox">
												<div class=" wrap_left">
													<div class="pbox1">
														<div class="pbox_tt">当前使用的头像</div>
														<div class=" wrap_left">
															<s:if test="userModel.photoUrl==null">
																<div class="show">
																	<img src="images/head.jpg"
																		onload="javascript:DrawImage(this,120,120)" /><br />120x120
																</div>
															</s:if>
															<s:else>
																<div class="show">
																	<img src='<s:property value="userModel.photoUrl120"/>'
																		width="120" height="120" /><br />120x120
																</div>
															</s:else>
														</div>
														<div class=" wrap_left">

															<s:if test="userModel.photoUrl==null">
																<div class="show">
																	<img src="images/icon_nohead.gif" width="50"
																		height="50" /><br />50x50
																</div>
															</s:if>
															<s:else>
																<div class="show">
																	<img src='<s:property value="userModel.photoUrl50"/>'
																		width="50" height="50" /><br />50x50
																</div>
															</s:else>
														</div>
														<div class="clear"></div>

													</div>
												</div>

												<div class=" wrap_left">
													<div class="pbox2_box">
														<s:fielderror />
														<s:form action="photoUpload" method="post"
															enctype="multipart/form-data">
															<div class="pbox2_tt">上传我的新头像,上传真人头像，诚信从头像开始！</div>
															<div class="pbox2" style="height: 200px;">
																上传头像<br />
																<s:file name="file" label="文件1" cssClass="input5"></s:file>
																<span id="photoFile_msg"></span> <br />
																<s:submit label="上传" value="提交" cssClass="input3"
																	onclick="photoCheck();" />
															</div>
															<div class="tips1">
																<span>上传说明：图片格式支持jpg/png。</span>
															</div>
														</s:form>
													</div>
												</div>
											</div>
										</div>
										<div class="clear"></div>
										<!--选项卡2内容结束-->
									</div>
									<div class="tabp_show" id="con_tabp_3">
										<!--选项卡3内容开始-->
										<!--选项卡3内容结束-->
									</div>
									<div class="clear"></div>
								</div>
							</div>
							<!--帐号管理选项卡结束 -->
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="clear"></div>
	<!--内容结束-->
</div>
</div>
</div>
<!--选项卡结束-->
</div>
</div>
<jsp:include page="/comm/bottom.jsp"></jsp:include>
</body>
</html>
<script type="text/javascript">
	<s:if test="photoTag==1">
	$("#con_tabp_1").attr("style", "display:none");
	$("#con_tabp_2").attr("style", "display:block");
	</s:if>
	function modifyInfo1() {
		$("#tipMessage1").html("");
		$("#nickName").attr("disabled", false);
		//$("#sex").attr("disabled",false);

		$("input[name='userModel.sex']").each(function() {
			$("input[name='userModel.sex']").attr("disabled", false);
		});

		$("#selfdesc").attr("disabled", false);
		$("#realname").attr("disabled", false);
		$("#mobile").attr("disabled", false);
		$("#qqid").attr("disabled", false);
		$("#msnid").attr("disabled", false);

		$('input[name="userModel.arrArea"]').attr("disabled", false);
		$('input[name="userModel.arrCat"]').attr("disabled", false);

		$("#profession").attr("disabled", false);
		$("#modifyInfo1Button").attr("style", "display:none");
		$("#saveInfo1Button").attr("style", "text-align:center; margin:30px 0");
	}

	function submitInfo1() {
		
		//清空操作
		$("#nickName_msg").html("");		
		$("#realname").html("");
		$("#area_msg").html("");
		$("#hangye_msg").html("");
		$("#zhiye_msg").html("");
		$("#selfdesc_msg").html("");
		$("#name_msg").html("");
		//清空操作
		$("#mobile_msg").html("");
		$("#qqid_msg").html("");
		$("#msnid_msg").html("");
		
		var realname = $.trim($("#realname").val());
		if (realname.length == 0) {
			$("#name_msg").html("<font color='red'>请填写真实姓名!</font>");
			return;
		}
		
		var valuelist = ""; //保存checkbox选中值
	    //遍历name以listTest开头的checkbox
	    $("input[name^='userModel.arrArea']").each(function() {
	    	if (this.checked) {
	            valuelist += "ok";
	        }
	    });
	    if (valuelist.length == 0) {
	    	$("#area_msg").html("<font color='red'>请选择代购区域!</font>");
	    	return ;
	    }
	    
	    valuelist = ""; //保存checkbox选中值
	    $("input[name^='userModel.arrCat']").each(function() {
	    	if (this.checked) {
	            valuelist += "ok";
	        }
	    });
	    if (valuelist.length == 0) {
	    	$("#hangye_msg").html("<font color='red'>请选择代购行业!</font>");
	    	return ;
	    }
	    
	    var zhiye = $.trim($("#profession").val());
		if (zhiye.length == 0) {
			$("#zhiye_msg").html("<font color='red'>请填写从事职业!</font>");
			return;
		}

		var mobile = $.trim($("#mobile").val());
		var qqid = $.trim($("#qqid").val());
		var msnid = $.trim($("#msnid").val());

		//昵称
		var nickName = $("#nickName").val().replace(/(^\s*)|(\s*$)/g, "");
		if (nickName == '') {
			$("#nickName_msg").html("<font color='red'>昵称不能为空!</font>");
			return;
		}

		if (nickName.length<6||nickName.length>30) {
			$("#nickName_msg").html(
					"<font color='red'>昵称必须为6到30位的字母和数字!</font>");
			return;
		}
		var Regx = /^[A-Za-z0-9]*$/;
		//必须为字母和数字
		if (!Regx.test(nickName)) {
			$("#nickName_msg").html(
					"<font color='red'>昵称必须为6到30位的字母和数字!</font>");
			return;
		}

		if (!(mobile == '')) {
			var reg = /^0{0,1}(13[0-9]|15[0-9]|18[0-9])[0-9]{8}$/;
			if (!reg.test(mobile)) {
				$("#mobile_msg").html("<font color='red'>手机号码格式不对！</font>");
				return;
			}
		}

		if (!(qqid == '')) {
			if (qqid.length<5||qqid.length>12) {
				$("#qqid_msg").html("<font color='red'>qq号码格式不对!</font>");
				return;
			}

			var Regx = /^[1-9][0-9]*$/;
			//必须为字母和数字
			if (!Regx.test(qqid)) {
				$("#qqid_msg").html("<font color='red'>qq号码格式不对!</font>");
				return;
			}
		}

		if (!(msnid == '')) {
			var re = new RegExp(
					/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/g);
			if (!re.test(msnid)) {
				$("#msnid_msg").html("<font color='red'>MSN格式不对!</font>");
				return;
			}
		}

		//自我介绍
		var selfdesc = $("#selfdesc").val().replace(/(^\s*)|(\s*$)/g, "");

		if(selfdesc.length==0){
			$("#selfdesc_msg").html("<font color='red'>代购格言不能为空!</font>");
			return;
		}
		if (selfdesc.length > 200) {
			$("#selfdesc_msg").html(
					"<font color='red'>自我介绍不能超过200个字符!</font>");
			return;
		}
		document.saveImportInfo.submit();
	}

	function photoCheck() {
		var obj = document.getElementById('photo');

		var file = obj.value;
		if (file == null || file == "") {
			$("#photoFile_msg").html("图像图片不能为空!");
			return (false);
		}

		var extend = file.substring(file.lastIndexOf(".") + 1);

		if (extend == "") {
			$("#photoFile_msg").html("图片格式不符合要求!");
		} else {
			extend = extend.toLowerCase();
			if (!(extend == "png" || extend == "jpg" || extend == "gif")) {
				$("#photoFile_msg").html("请上传后缀名为jpg/png/gif的文件!");
				var nf = obj.cloneNode(true);
				nf.value = '';
				obj.parentNode.replaceChild(nf, obj);
				return false;
			}
		}
		return true;
	}
</script>
